<template>
  <PublicPage borderType pageName="推荐奖金" pageBgcolor="#ffffff" class="ssp-referral-bonus">
    <scroll-view scroll-y class="scroll_view">
      <!-- 推荐奖金区域 -->
      <view class="bonus-wrap">
        <view class="bonus-content">
          <view class="bonus-header">
            <text>推荐奖金</text>
            <view class="switch-wrap">
              <u-switch
                  v-model="bonusObj.isOpenRecommendBonus"
                  active-value="1"
                  inactive-value="0"
                  active-color="#E44435"
                  size="44"
              />
              <view class="switch-click" @click.stop="handleSwitch"></view>
            </view>
          </view>
          <view class="bonus-txt">推荐奖金是老帮卖推荐新帮卖出单后，发放给老帮卖的奖励</view>
          <view v-if="bonusObj.isOpenRecommendBonus" class="bonus-setting" @click="openPopup">
            <text class="setting-txt">设置奖金比例</text>
            <view class="u-flex viceColor u-col-center">
              <text v-if="bonusObj.recommendBonusRatio" class="u-font-md u-m-r-8 themeFontColor">
                {{bonusObj.recommendBonusRatio}}%
              </text>
              <text v-else class="u-font-md u-m-r-8">暂未设置</text>
              <view class="iconfont icon-arrow_right"></view>
            </view>
          </view>
        </view>
      </view>
      <!-- 奖金规则区域 -->
      <view class="rule-wrap">
        <view class="rule-header">推荐奖金规则说明</view>
        <view class="rule-relation">
          <view class="rule-relation-item">
            <view class="icon-content">
              <view class="iconfont icon-invite icon-image" />
            </view>
            <view class="rule-txt">帮卖给你邀请新帮卖</view>
          </view>
          <image src="https://image.qqpyyds.com/mpAppImg/icon/bonus-arrow.png" class="arrow-image" />
          <view class="rule-relation-item">
            <view class="icon-content">
              <view class="iconfont icon-shop icon-image" />
            </view>
            <view class="rule-txt">新帮卖开团卖货出去</view>
          </view>
          <image src="https://image.qqpyyds.com/mpAppImg/icon/bonus-arrow.png" class="arrow-image" />
          <view class="rule-relation-item">
            <view class="icon-content">
              <view class="iconfont icon-redpacket icon-image" />
            </view>
            <view class="rule-txt">你发放奖金给老帮卖</view>
          </view>
        </view>
        <view class="rule-desc">
          <view class="equation-txt">推荐奖金=新团长帮卖销售额 x 推荐奖金比例</view>
          <view class="txt viceColor">例：老帮卖A邀请新帮卖B加入，B帮您卖货金额8000元，若设置推荐奖金比例为5%，则您需要给老帮卖A发放400元（8000*5%）推荐奖金。</view>
          <view class="txt viceColor txt2">推荐奖金将发放至帮卖达人的奖金池内。</view>
          <view class="txt viceColor txt3">推荐奖金只针对你下游帮卖你的自营商品发放。</view>
          <view class="txt themeFontColor">推荐奖金是帮卖佣金之外，额外支出的佣金，请谨慎配置。</view>
        </view>
      </view>
    </scroll-view>
    <view class="safe-area-inset-bottom footer-button">
      <button
          open-type="share" id="sharewx"
          :disabled="!bonusObj.isOpenRecommendBonus||!bonusObj.recommendBonusRatio"
          :class="{'disabled-color':!bonusObj.isOpenRecommendBonus||!bonusObj.recommendBonusRatio}"
          class="button"
      >
        邀请帮卖来推荐
      </button>
    </view>
    <!-- 开启、关闭推荐奖金确认框 -->
    <Modal
        :show="modalObj.show"
        :title="modalObj.title"
        :content="modalObj.content"
        :configText="modalObj.configText"
        @close="()=>modalObj.show=false"
        @config="modalSubmit"
    />
    <!-- 设置推荐奖金比例的动作面板 -->
    <u-popup v-model="popupObj.dlPopup" safe-area-inset-bottom mode="bottom" @maskClick="popupObj.dlPopup=false">
      <view class="ratio-popup">
        <view class="ratio-header">设置推荐奖金比例</view>
        <view class="ratio-slider">
          <view class="slider-txt">2%</view>
          <view class="slider-wrap">
            <slider
                min="2"
                max="10"
                :value="popupObj.copyRatio"
                step="1"
                block-size="14"
                activeColor="#E44435"
                backgroundColor="#F2F3F5"
                class="slider"
                @change="sliderChange"
                @changing="sliderChanging"
            />
            <!-- 刻度区域 -->
            <view class="slider-scale-wrap">
              <view
                  v-for="(item,index) in 8"
                  :key="index"
                  :class="{
                    'scale-item':index>0,
                    'active-scale-item':index<popupObj.sActiveIndex,
                    'inactive-scale-item': index>popupObj.sActiveIndex
                  }"
                  :style="{left:(index*popupObj.sInterVal)+'px'}"
              ></view>
            </view>
            <!-- 气泡区域 -->
            <view class="slider-popover" :style="{left:popover.left+'px'}">{{popupObj.copyRatio}}%</view>
          </view>
          <view class="slider-txt">10%</view>
        </view>
        <view class="ratio-txt-wrap">
          <text class="themeFontColor">温馨提示：</text>
          <text class="viceColor">推荐奖金是帮卖佣金之外，额外支出的佣金，请谨慎配置。</text>
        </view>
        <button class="ratio-button" @click="configOpen">确认设置</button>
      </view>
    </u-popup>
    <!-- 确认设置推荐奖金确认框 -->
    <u-modal v-model="dlModal" :show-title="false" :show-confirm-button="false">
      <view class="ratio-modal">
        <view class="fz-18 fw5 tc viceColorN8 linh-24">确认推荐奖金设置</view>
        <view class="modal-ratio-content">
          <view class="content-txt">配置/修改后将对所有下游及已推荐的用户生效，是否确认设置？</view>
          <view class="ratio-num-wrap">推荐奖金 {{popupObj.copyRatio}}%</view>
        </view>
        <view class="modal-button-wrap">
          <view class="button" @click="dlModal=false">取消</view>
          <view class="button themeFontColor fw5" @click="handleSubmit">确认设置</view>
        </view>
      </view>
    </u-modal>
  </PublicPage>
</template>

<script>
import PublicPage from '@/components/publicPage/index.vue'
import Modal from '@/components/modal/index.vue'
import userApi from '@/api/user.js'
const POPOVER_LEFT = 23 // 气泡的初始left位置
export default {
  name: 'referralBonus',
  components: {
    PublicPage,
    Modal
  },
  data() {
    return {
      // 推荐奖金配置对象
      bonusObj: {
        isOpenRecommendBonus: 0, // 是否打开推荐奖金:0否1是
        recommendBonusRatio: null, // 推荐奖金比例,首次打开推荐奖金必填
      },
      // 推荐奖金开关文案对象
      modalObj: {
        show: false,
        title: '开启推荐奖金',
        content: '开启推荐奖金将有效的刺激老帮卖帮你推荐新帮卖，裂变分销更轻松！',
        configText: '确定开启',
        type: 1, // 区分switch开关是要开启还是关闭 1为开启状态、0为关闭状态
      },
      // 设置推荐奖金比例对象
      popupObj: {
        dlPopup: false,
        copyRatio: 2, // 复制的推荐奖金比例--避免在滑动选择器时，还未提交，原始数据跟着改变
        sInterVal: 0, // 刻度的间隔距离
        sActiveIndex: 0, // 滑动器激活的
      },
      // 推荐奖金显示气泡的对象
      popover: {
        left: -23,
        // width: 55
      },
      dlModal: false, // 最后确认奖金时的modal变量
    }
  },

  onLoad(options) {
    if (options && options.popup === 'true') {
      // this.getReferralBonus(true)
      // this._getSliderDom()
      this.popupObj.dlPopup = true
      if (!this.isLogin) {
        this.navigateTo({url: 'pagesB/login/index'})
      }
    }
    // 禁用菜单的分享按钮
    wx.hideShareMenu({
      menus: ["shareAppMessage"]
    })
  },
  onShow() {
    this.isLogin && this.getReferralBonus(this.popupObj.dlPopup)
    this.popupObj.dlPopup && this._getSliderDom()
  },
  onHide() {
    console.log(this.popupObj.dlPopup, '121212')
    this.popupObj.dlPopup = false
  },
  onShareAppMessage(res) {
    const shareObj = {
      title: '我开启了推荐奖金，快来帮我推荐帮卖赚奖金吧！',
      imageUrl: `https://image.qqpyyds.com/mpAppImg/prizePool/InviteToHelpSell.png?t=${Date.parse(new Date())}`,
      path: `/pagesB/personalCenter/homePage?accountId=${this.$store.state.userInfo.accountId}&recommendCode=${this.$store.state.userInfo.idCode}&idCode=${this.$store.state.userInfo.idCode}&from=bonus&applyForHelp=true&shareType=true`
    }
    // if (res.target.id === 'sharewx') {}
    console.log(JSON.parse(JSON.stringify(shareObj)), '分享参数')
    return shareObj
  },
  methods: {
    // 获取推荐奖金配置信息
    getReferralBonus(bool = false) {
      userApi.getBonusInfo().then(res => {
        if (res.code === 200) {
          this.bonusObj = res.data
          if (bool) {
            this.bonusObj.isOpenRecommendBonus = 1
            this.popupObj.copyRatio = this.bonusObj.recommendBonusRatio || 2
            this.popupObj.sActiveIndex = this.popupObj.copyRatio - 2
          }
          this._configBonusTxt()
        }
      })
    },
    // 确定开启、关闭推荐奖金的文案
    _configBonusTxt() {
      if (this.bonusObj.isOpenRecommendBonus) {
        this.modalObj.title = '确定要关闭推荐奖金吗？'
        this.modalObj.content = '关闭推荐奖金之后，推荐关系将无法生效，帮卖将失去推荐奖金收入，请谨慎设置'
        this.modalObj.configText = '确定关闭'
        this.modalObj.type = 1
      } else {
        this.modalObj.title = '开启推荐奖金'
        this.modalObj.content = '开启推荐奖金将有效的刺激老帮卖帮你推荐新帮卖，裂变分销更轻松！'
        this.modalObj.configText = '确定开启'
        this.modalObj.type = 0
      }
    },
    // 开启、关闭开关
    handleSwitch () {
      // 未登录
      if (!this.isLogin) {
        this.navigateTo({ url: '/pagesB/login/index'})
        return
      }
      this._configBonusTxt()
      this.modalObj.show = true
    },
    // 获取slider元素信息
    _getSliderDom() {
      setTimeout(() => {
        // 获取滑块条的尺寸信息
        this.$uGetRect('.slider').then(rect => {
          // 计算刻度的间隔
          this.popupObj.sInterVal = rect.width / 8
          // 调整气泡的位置
          if (this.bonusObj.recommendBonusRatio && this.bonusObj.recommendBonusRatio > 2) {
            this.popover.left = (this.bonusObj.recommendBonusRatio - 2) * this.popupObj.sInterVal - POPOVER_LEFT
          }
        })
      }, 50)
    },
    // 点击推荐奖金比例打开动作面板
    openPopup() {
      this._getSliderDom()
      this.popupObj.copyRatio = this.bonusObj.recommendBonusRatio || 2
      this.popover.left = -23
      this.popupObj.sActiveIndex = this.popupObj.copyRatio - 2
      this.popupObj.dlPopup = true
    },
    // 开启推荐奖金比例对话框时--确定开启、确定关闭时触发
    modalSubmit() {
      this.bonusObj.isOpenRecommendBonus = this.bonusObj.isOpenRecommendBonus ? 0 : 1
      if (!this.modalObj.type) {
        this._getSliderDom()
        this.popupObj.copyRatio = this.bonusObj.recommendBonusRatio || 2
        this.popupObj.sActiveIndex = this.popupObj.copyRatio - 2
        this.popupObj.dlPopup = true
      } else {
        if (this.bonusObj.recommendBonusRatio) {
          userApi.setReBonus(this.bonusObj)
        }
      }
      this.modalObj.show = false
    },
    // 动作面板确定设置--弹出最后一次确认提交推荐比例对话框
    configOpen() {
      // 未登录
      if (!this.isLogin) {
        this.navigateTo({ url: '/pagesB/login/index'})
        return
      }
      this.popupObj.dlPopup = false
      this.dlModal = true
    },
    // 提交--请求接口
    handleSubmit() {
      const params = {
        isOpenRecommendBonus: this.bonusObj.isOpenRecommendBonus,
        recommendBonusRatio: this.popupObj.copyRatio || 2
      }
      userApi.setReBonus(params).then(res => {
        if (res.code === 200) {
          this.bonusObj.recommendBonusRatio = this.popupObj.copyRatio
          this.dlModal = false
        }
      })
    },
    // 滑动选择器完成一次拖动后触发
    sliderChange(e) {
      this.popupObj.sActiveIndex = e.detail.value - 2
      // 计算气泡的left位置
      if (e.detail.value !== this.popupObj.copyRatio) {
        this.popover.left = this.popupObj.sInterVal * (e.detail.value - this.popupObj.copyRatio) + this.popover.left
      }
      this.popupObj.copyRatio = e.detail.value
    },
    // 滑动选择器拖动过程中触发--若手指、鼠标无释放，滑动步进时会一直触发
    sliderChanging(e) {
      this.popupObj.sActiveIndex = e.detail.value - 2
    }
  }
}
</script>

<style lang="scss" scoped>
.ssp-referral-bonus {
  width: 100%;
  height: 100%;
  .scroll_view {
    width: 100%;
    height: 100%;
  }
  // 推荐奖金区域 start
  .bonus-wrap {
    width: 100%;
    padding: 20rpx 24rpx;
    background-color: $n1Color;
    .bonus-content {
      padding: 24rpx 32rpx;
      border-radius: 16rpx;
      box-shadow: 0 4rpx 24rpx rgba(150, 151, 153, 0.16);
      background: #FFFFFF;
    }
    .bonus-header {
      display: flex;
      justify-content: space-between;
      height: 80rpx;
      font-size: 32rpx;
      line-height: 80rpx;
      font-weight: 600;
      box-shadow: inset 0 -2rpx 0 #EBEDF0;
      color: $n8Color;
    }
    .switch-wrap {
      position: relative;
      height: 92rpx;
      height: 52rpx;
    }
    .switch-click {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2;
      width: 100%;
      height: 100%;
    }
    .bonus-txt {
      height: 80rpx;
      text-align: center;
      font-size: 24rpx;
      line-height: 80rpx;
      color: $n6Color;
    }
    .bonus-setting {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 88rpx;
    }
    .setting-txt {
      font-size: 28rpx;
      line-height: 40rpx;
      color: $n8Color;
    }
  }
  // 推荐奖金区域 end
  // 奖金规则区域 start
  .rule-wrap {
    padding: 0 32rpx 100rpx;
    .rule-header {
      height: 96rpx;
      font-size: 32rpx;
      line-height: 96rpx;
      color: $n8Color;
    }
    .rule-relation {
      display: flex;
      padding: 40rpx 0;
    }
    .rule-relation-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 144rpx;
      height: 192rpx;
    }
    .icon-content {
      width: 96rpx;
      height: 96rpx;
      margin-bottom: 16rpx;
      line-height: 96rpx;
      text-align: center;
      border-radius: 50%;
      background-color: $n1Color;
    }
    .icon-image {
      font-size: 58rpx;
      color: $themeColor;
    }
    .rule-txt {
      text-align: center;
    }
    .arrow-image {
      width: 32rpx;
      height: 32rpx;
      margin: 40rpx 44rpx 0;
    }
    .rule-desc {
      padding: 24rpx 0;
    }
    .equation-txt {
      margin-bottom: 24rpx;
      line-height: 40rpx;
      font-size: 28rpx;
      font-weight: 600;
      color: $themeColor;
    }
    .txt {
      line-height: 40rpx;
      font-size: 28rpx;
      //color: $n6Color;
    }
    .txt2 {
      margin: 34rpx 0;
    }
    .txt3 {
      margin-bottom: 43rpx;
    }
  }
  // 奖金规则区域 end
  .footer-button {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    .button {
      width: 100%;
      height: 100rpx;
      font-size: 32rpx;
      line-height: 100rpx;
      border-radius: 0;
      text-align: center;
      background-color: $themeColor;
      color: #ffffff;
    }
    .disabled-color {
      background-color: #FFE5DE;
    }
  }
  // popup start
  .ratio-popup {
    .ratio-header {
      height: 96rpx;
      font-size: 32rpx;
      font-weight: 500;
      line-height: 96rpx;
      text-align: center;
      color: $n8Color;
    }
    .ratio-slider {
      position: relative;
      display: flex;
      box-sizing: border-box;
      height: 212rpx;
      padding: 128rpx 46rpx 0;
    }
    .slider-wrap {
      position: relative;
      flex: 1;
      margin: 0 20rpx;
      z-index: 10;
    }
    .slider {
      width: 100%;
      margin: 0;
    }
    .slider-scale-wrap {
      position: absolute;
      top: 8rpx;
      left: 0;
      width: 100%;
    }
    .scale-item {
      position: absolute;
      top: 0;
      left: 0;
      width: 2rpx;
      height: 8rpx;
      transition: background-color .1s;
    }
    .active-scale-item {
      background-color: $themeColor;
      transition: background-color .1s;
    }
    .inactive-scale-item {
      background-color: $n2Color;
      transition: background-color .1s;
    }
    .slider-txt {
      font-size: 28rpx;
      line-height: 40rpx;
      color: $n6Color;
    }
    .slider-popover {
      position: absolute;
      top: -79rpx;
      left: -54rpx;
      padding: 6rpx 22rpx;
      border-radius: 16rpx;
      font-size: 32rpx;
      line-height: 44rpx;
      box-shadow: 0 4rpx 8rpx -12rpx rgba(186, 53, 40, 0.2);
      background: $themeColor;
      color: #FFFFFF;
      transition: all .3s;
      &::before {
        position: absolute;
        bottom: -16rpx;
        left: 50%;
        transform: translateX(-50%);
        content: "";
        width: 0;
        height: 0;
        border-top: 18rpx solid $themeColor;
        border-left: 18rpx solid transparent;
        border-right: 18rpx solid transparent;
      }
    }
    .ratio-txt-wrap {
      height: 128rpx;
      padding: 24rpx 46rpx;
      margin-bottom: 104rpx;
      line-height: 40rpx;
      font-size: 28rpx;
    }
    .ratio-button {
      width: 100%;
      height: 100rpx;
      font-size: 32rpx;
      border-radius: 0;
      line-height: 100rpx;
      text-align: center;
      background-color: $themeColor;
      color: #ffffff;
    }
  }
  // popup end
  // modal start
  .ratio-modal {
    padding: 48rpx 0 0;
    .modal-ratio-content {
      padding: 0 48rpx 32rpx;
      margin-top: 16rpx;
    }
    .content-txt {
      margin-bottom: 32rpx;
      font-size: 28rpx;
      line-height: 40rpx;
      text-align: center;
      color: $n6Color;
    }
    .ratio-num-wrap {
      height: 96rpx;
      line-height: 96rpx;
      border-radius: 16rpx;
      font-size: 36rpx;
      font-weight: 500;
      color: $themeColor;
      text-align: center;
      background-color: $n1Color;
    }
    .modal-button-wrap {
      display: flex;
      line-height: 96rpx;
      font-size: 32rpx;
    }
    .button {
      width: 50%;
      text-align: center;
      font-weight: 500;
      box-shadow: 2rpx -2rpx 2rpx #ebedf0;
      color: $n6Color;
    }
  }
  // modal end
}
</style>
